<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>账号安全登录</title>

    <link rel="icon" th:href="@{/favicon.ico}" href="../static/favicon.ico" type="image/x-icon"/>
    <link rel="bookmark" th:href="@{/favicon.ico}" href="../static/favicon.ico" type="image/x-icon"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../static/css/login.css" th:href="@{/static/css/login.css}"/>
</head>
<body>
<div class="login-wrapper">
    <div class="login-box">
        <div class="login-box-body">
            <div class="login-box-left">
              <div>
                  <h2>OpencEE 企业级开发平台</h2>
                  <ul style="line-height: 30px;margin-top: 50px;list-style: disc">
                      <li>SpringCloud全家桶、Nacos配置中心</li>
                      <li>统一网关、oauth2+jwt统一认证鉴权、sso单点登录</li>
                      <li>工作流+低代码平台</li>
                      <li>快速开发、高可用微服务、容器化部署</li>
                  </ul>
              </div>
            </div>
            <div class="login-box-right">
                <div th:if="${errorMessage != null}"
                     class="alert alert-danger error-txt" role="alert">
                    <span class="glyphicon glyphicon-info-sign"></span>&nbsp;&nbsp;&nbsp;&nbsp; <span th:text="${errorMessage}">请妥善管理账号信息，谨防丢失</span>
                </div>
                <div class="login-warp">
                    <div class="login-warp-content">
                        <!-- Nav tabs -->
                        <ul id="myTabs" class="nav nav-tabs" role="tablist">
                            <li th:if="${qrEnabled}" role="presentation"><a href="#tabQrcode"  data-toggle="tab">扫描登录</a></li>
                            <li role="presentation" class="active"><a href="#tabPassword"  data-toggle="tab">账号登录</a></li>
                            <li role="presentation"><a href="#tabLADP"  data-toggle="tab">LADP登录</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div id="tabQrcode" style="display: none">
                                <div id="qrcode-error" class="qrcode-error">
                                    <div class="qrcode-mask"></div>
                                    <p class="error-txt">二维码已失效</p>
                                    <a class="btn-reload" href="javascript:void(0);" onclick="loadQrCode()">刷新</a>
                                </div>
                                <div class="qrcode-box">
                                    <div class="qrcode-box-img">
                                        <img id="img-qrcode">
                                    </div>
                                </div>
                            </div>
                            <form  id="loginForm" role="form" method="post" action="login" th:action="@{/login}">
                                <input id="client_id" name="client_id" hidden th:value="${param.client_id}">
                                <input id="response_type" name="response_type" hidden th:value="${param.response_type}">
                                <input id="redirect_uri" name="redirect_uri" hidden th:value="${param.redirect_uri}">
                                <input id="targetUrl" name="targetUrl" hidden th:value="${param.targetUrl}">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <span class="input-group-text"><i class="glyphicon glyphicon-user"></i></span>
                                        </div>
                                        <input id="username" type="text" name="username" required placeholder="登录名/邮箱/手机号" th:placeholder="#{login.username}"
                                               class="form-control ">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <span class="input-group-text"><i class="glyphicon glyphicon-lock"></i></span>
                                        </div>
                                        <input id="password" type="password" name="password" required placeholder="密码" th:placeholder="#{login.password}"
                                               class="form-control ">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row" style="margin: 0">
                                        <div class="col-sm-8 col-md-8" style="padding-left: 0px">
                                            <input id="code" maxlength="6" type="text" name="code" required
                                                   placeholder="验证码"
                                                   class="form-control ">
                                        </div>
                                        <div class="col-sm-4 col-md-4" style="padding-right: 0px">
                                            <input id="rid" name="rid" hidden>
                                            <img id="img-captcha" onclick="loadCaptchaCode()" style="float: right"
                                                 width="100" height="43">
                                        </div>
                                    </div>
                                    <p class="help-block"><a class="pull-right" href="">忘记密码</a></p>
                                </div>
                                <div class="form-group m-login-btn">
                                    <button type="submit"  class="btn btn-primary btn-sm btn-block">登录
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <hr style="margin-top: 50px;clear:both;">
                    <p class="third-login">
                    <ul  th:if="${socialEnabled}" class="login-third-main-list">
                        <li class="login-third-main-item">
                            <a class="login-third-link" href="javascript:void(0)"
                               onclick="jump('login/auth/gitee')">码云</a>
                        </li>
                        <li class="login-third-main-item">
                            <a class="login-third-link" href="javascript:void(0)"
                               onclick="jump('login/auth/qq')">QQ</a>
                        </li>
                        <li class="login-third-main-item">
                            <a class="login-third-link" href="javascript:void(0)"
                               onclick="jump('login/auth/wx')">微信</a>
                        </li>
                        <li>
                            <a class="login-third-link" href="javascript:void(0)"
                               onclick="jump('login/auth/alipay')">支付宝</a>
                        </li>
                    </ul>
                    </p>
                </div>
            </div>
        </div>
        <div class="copyright">
            Copyright © 2019-2022  openc.top 版权所有
        </div>
    </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" th:inline="javascript">
  var tid;
  /*<![CDATA[*/
  var ctxPath = /*[[@{/}]]*/ '';

  /*]]>*/

  function jump(path) {
    window.location = ctxPath + path;
    return false;
  }

  function loadQrCode() {
    if ($('#img-qrcode').length > 0) {
      $.getJSON('login/qrcode', {w: 147, h: 147}, function (res) {
        if (res.success) {
          $('#qrcode-error').hide();
          $('#img-qrcode').attr('src', res.data.imageBase64);
          startTimer(res.data.code);
        }
      })
    }
  }


  function loadCaptchaCode() {
    $.getJSON('login/captcha', function (res) {
      if (res.success) {
        $('#rid').val(res.data.rid);
        $('#img-captcha').attr('src', res.data.imageBase64);
      }
    })
  }

  function checkQrCode(code) {
    $.getJSON('login/qrcode/check', {"code": code}, function (res) {
      if (res.success) {
        // 已失效
        if (res.data !== 'waiting') {
          $('#qrcode-error').show();
          clearInterval(tid);
        }
      }
    })
  }

  function doSubmit() {
    $.post('login', {
      username: $('#username').val(),
      password: $('#password').val(),
      rid: $('#rid').val(),
      code: $('#code').val(),
      client_id: $('#client_id').val(),
      response_type: $('#response_type').val(),
      redirect_uri: $('#redirect_uri').val(),
      targetUrl: $('#targetUrl').val()
    }, function (res) {
      if (res.success && res.data && res.data.url) {
        window.location = res.data.url
      }else{
        loadCaptchaCode()
      }
    }, 'json')
  }

  function startTimer(code) {
    tid = setInterval(checkQrCode, 3000, code);
  }

  $(function () {
    $('#myTabs a').click(function (e) {
          e.preventDefault()
          let hash = e.target.hash;
          console.log(hash)
        if(hash ==='#tabQrcode'){
            $('#tabQrcode').show();
            $('#loginForm').hide();
        }
        if(hash ==='#tabPassword'){
            $('#tabQrcode').hide();
            $('#loginForm').attr("action",ctxPath+"login").show();
        }
        if(hash ==='#tabLADP'){
            $('#tabQrcode').hide();
            $('#loginForm').attr("action",ctxPath+"login/ladp").show();
        }
    })

    loadCaptchaCode();
    loadQrCode();

  })
</script>
</html>
